<script setup lang="ts">
import { ref, reactive, onMounted, nextTick } from "vue";
import { getRightCenterData} from "@/api";
import * as echarts from "echarts";
import { ElMessage } from "element-plus";
import ItemWrap from "@/components/item-wrap";

const option = ref({});
const title = ref("");
const data = ref({});
const chart_x = ref([]);
const chart_y = ref([]);
const getData = async () => {
  await getRightCenterData()
    .then((res) => {
      console.log("右中", res);
      if (res.code) {
        for (let item of res.data) {
          const value = JSON.parse(item.statisticalValue);
          switch (item.type) {
            case "title":
              title.value = value.data;
              break;
            case "data":
              data.value = value.data
              break;
          }
        }

        chart_x.value = data.value.map((item) => item.title);
        chart_y.value = data.value.map((item) => item.count);
        var chartDom = document.getElementById('chart');
        var myChart = echarts.init(chartDom);
        setOption()
        option && myChart.setOption(option.value);
      } else {
        ElMessage.error(res.msg)
      }
    })
    .catch((err) => {
      ElMessage.error(err);
    });
};
const setOption =  () => {
  option.value = {

    xAxis: {
      type: 'value',
      boundaryGap: [0, 0.01],
      axisLabel: {
        color: '#ffffff', // 设置X轴数字的颜色为红色
        fontSize: 16, // 设置字体大小
        fontFamily: 'Arial' // 设置字体类型
      }
    },
    yAxis: {
      type: 'category',
      data: chart_x.value,
      inverse: true,
      axisLabel: {
        color: '#ffffff', // 设置X轴数字的颜色为红色
        fontSize: 16, // 设置字体大小
        fontFamily: 'Arial', // 设置字体类型
      }
    },
    grid: {
      left: '20%', // 增加左侧空间
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      },
      formatter: function (params) {
        let tooltipContent = '';
        params.forEach(function (param) {
          tooltipContent += param.name + ': ' + '<br/>'+"车辆违规次数：" + param.value + '<br/>';
        });
        return tooltipContent;
      }
    },
    series: [
      {
        type: 'bar',
        data: chart_y.value,
        label: {
          show: true, // 显示数据标签
          position: 'right', // 数据标签的位置，可以是 'top', 'inside', 'outside' 等
          color: '#fff', // 数据标签的字体颜色
          fontSize: 12 // 数据标签的字体大小
        }
      }
    ]
  };

};
onMounted(() => {
  getData();

});
</script>

<template>
  <item-wrap :title='title'  style="height: 40px;" ></item-wrap>
    <div class="main-content">
      <div id="chart" class="chart-wrap"/>
    </div>
</template>

<style scoped lang="scss">
.main-content{
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center; /* 垂直居中 */
  justify-content: center;
  background-color: #04102d90;

}
.chart-wrap {
  width: 100%;
  height: 100%;
}
</style>
